<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="shortcut icon" href="../img/icon.png"/>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/list.css">
    <link rel="stylesheet" href="../img/font/iconfont.css">
</head>
<body>
    <header>
        <nav class="nv">
            <ul>
                <li><a href="../index.html">欢迎来到美域甄品！</a></li>
                <li><a href="#"><i class="iconfont icon-gerenzhongxin"></i>尊敬的用户</a></li>
            </ul> 
            <ul class="ul-right">
                <li><a href="#">我的订单</a></li>
                <li><a href="#">个人中心</a></li>
                <li><a href="#">商家申请入驻</a></li>
                <li><a href="#">平台运营规范</a></li>
                <li><a href="#"><i class="iconfont icon-shouji"></i>手机版</a></li>
            </ul>
        </nav>
    </header>
    <div class="HUA">
        <ul>
            <li>
                <i class="iconfont icon-shoucang"></i>
                <a href="#">我的收藏</a>
            </li>
            <li>
                <i class="iconfont icon-wodezuji"></i>
                <a href="#">我的足迹</a>
            </li>
            <li>
                <i class="iconfont icon-saoyisao"></i>
                <a href="#">下载APP</a>
            </li>
            <li>
                <i class="iconfont icon-kefu"></i>
                <a href="#">联系客服</a>
            </li>
            <li>
                <i class="iconfont icon-huidaodingbuxianxing "></i>
                <a href="#">回到顶部</a>
            </li>
        </ul>
    </div>
    <div class="logoX">
        <div class="logoX-con">
            <div class="logo">
                <div class="all">
                    <div class="all-left">
                        <a href="../index.html"><img src="../img/logo.png" ></a>
                    </div>
                    <div class="all-center">
                        <div class="box1">
                            <ul>
                                <li><a href="#">商品</a></li>
                                <li><a href="#">店铺</a></li>
                            </ul>
                            <input type="text" placeholder="请输入您要搜索的关键字" class="clearInput"/>
                            <button class="search">搜索</button>
                        </div>
                        <div class="box2">
                            <ul>
                                <li><a href="#">电动牙刷</a></li>
                                <li><a href="#">冰白葡萄酒女士</a></li>
                                <li><a href="#">红酒</a></li>
                                <li><a href="#">冰糖</a></li>
                                <li><a href="#">内裤</a></li>
                                <li><a href="#">风扇</a></li>
                                <li><a href="#">面条机</a></li>
                                <li><a href="#">卫生巾透气</a></li>
                                <li><a href="#">面条锅</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="all-right">
                        <span>0</span>
                        <a href="./cart.html"><i class="iconfont icon-gouwuche"></i>我的购物车</a>
                    </div>
                </div>
            </div>
            <ul class="service">
                <li><a href="../index.html">首页</a></li>
                <li><a href="#">美容护肤</a></li>
                <li><a href="#">甄选彩妆</a></li>
                <li><a href="./world.html">全球购</a></li>
                <li><a href="#">美康专护</a></li>
                <li><a href="#">个人护理</a></li>
                <li><a href="#">营养健康</a></li>
                <li><a href="#">母婴专区</a></li>
                <li><a href="#">服饰鞋帽</a></li>
                <li><a href="#">品质家具</a></li>
                <li><a href="./self.html">门店自提</a></li>
                <li><a href="#">美容服务</a></li>
            </ul>
        </div>
    </div>
    <main>
        <div class="main-con">
            <div class="gs-name">
                <div class="gs-name-left">
                    <div class="gnl-1">
                        <span class="mask"></span>
                        <img src="../img/list.jpeg" alt="">
                    </div>
                    <div class="gnl-2">
                        <img src="../img/list-1.jpeg" alt="">
                        <img src="../img/list-2.jpeg" alt="">
                        <img src="../img/list-4.jpeg" alt="">
                    </div>
                    <span>商品编码 121453</span>
                </div>
                <div class="gs-name-right">
                    <div class="bigBox">
                        <img src="../img/list.jpeg" alt="">
                    </div>
                    <h2>雪仙丽帽子夏季新款花朵防晒紫外线欧美女时装帽防晒纱网太阳帽大沿遮阳帽</h2>
                    <div class="price">
                        <div class="p-left">
                            <div>价格 <b>398.00</b> <span>￥699.00</span></div>
                            <p>订单满398元，送价值580元美容券</p>
                        </div>
                        <div class="p-right">
                            <p>销量</p>
                            <span>42</span>
                        </div>
                    </div>
                    <div class="freight">运费  <span>6</span>元</div>
                    <div class="colors">  
                        <span>颜色</span>
                           <ul>
                               <li><a href="#">酒红</a></li>
                               <li><a href="#">蓝色</a></li>
                               <li><a href="#">粉橘</a></li>
                               <li><a href="#">金色</a></li>
                               <li><a href="#">亮紫</a></li>
                               <li><a href="#">咖啡色</a></li>
                           </ul>
                    </div>
                    <div class="size">
                        <span>规格</span>
                        <div>M(56-58cm)</div>
                    </div>
                    <div class="num">
                        <span>数量</span>
                        <div class="num-1">
                            <!-- <div class="num-1-1">1</div> -->
                            <input type="text" value="1" class="clearInput num-1-1">
                            <div class="num-1-2">
                                <button class="increase">+</button>
                                <button class="reduce">-</button>
                            </div>
                        </div>
                        <p>库存989件，抓紧时间抢购哦！</p>
                    </div>
                    <div class="buy">
                        <button class="adds">加入购物车</button>
                        <button class="buy-now">立即购买</button>
                    </div>
                </div>
            </div>
            <div class="gs-share">
                <span><i class="iconfont icon-fenxiang"></i>分享</span> 
                <span><i class="iconfont icon-shoucang"></i>收藏</span>             
            </div>

            <div class="gs-intro"></div>
        </div>
    </main>
    <div class="footer-container"></div>
    <script src="../libs/jquery.min.js"></script>
    <script>
        $('.footer-container').load('footer.html')
    </script>
    <script src="../js/ajax.js"></script>
    <script src="../js/list.js"></script>
</body>
</html>